<template>

  <el-tabs tab-position="left"  class="demo-tabs">
    <!-- 生成一级分类 -->
    <el-tab-pane class="pane" v-for="item in cateData" :label="item.title">
      <!-- 生成二级分类 【结构1-带有group数据】-->
      <div v-if="item.group.length" v-for="lev2 in item.group">
        <h2 class="title">{{ lev2.title }}</h2>
        <el-row :gutter="60">
          <!-- 生成三级分类 -->
          <el-col class="cate-col" v-for="lev3 in lev2.image_list" :span="6">
            <el-card @click="handleCard(lev3.redirect)">
              <template #header>
                <h3 class="title03">{{ lev3.title }}</h3>
              </template>
              <img
                v-bind:src="lev3.url"
                style="width: 100%"
              />
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- 生成二级分类 【结构2】 -->
      <div v-else>
        <el-row :gutter="20">
          <el-col v-for="imgItem in item.top_image_list" :span="11" :offset="1">
            <img class="img-item" :src="imgItem.url" alt="">
          </el-col>
        </el-row>
      </div>
    </el-tab-pane>
  </el-tabs>
  <my-drawer v-model="drawer" :module_id="mid"/>
</template>

<script  setup>
import { ref } from 'vue'
import { categoryGet } from '../../api/category';
import MyDrawer from './components/my-drawer.vue';
let cateData = ref([])
categoryGet().then((data)=>{
  // console.log('111',data);
  // let catalog_modules = data.catalog_modules //ES5中最基本的语法
  let {catalog_modules} = data  //ES6提供的解构赋值
  cateData.value = catalog_modules
})

//点击卡片的事件函数
const drawer = ref(false)  //父级控制el-drawer子组件的数据包
const mid = ref()  //动态存放主分类id
const handleCard = (redirect)=>{
  // 显示抽屉
  drawer.value = true
  // 动态修改传给抽屉组件的mid
  // console.log(redirect);
  // "wozaijia://pagehost/classification/sort_filter_list?module_id=1527&from_title={\"from_title\":\"软靠床\"}"
  let id = redirect.split('?')[1].split('&')[0].split('=')[1]
  mid.value = id

}
</script>

<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
.el-tabs__item{
  margin: 20px 0;
}

.el-row {
  margin-bottom: 20px;
  /* border: 1px solid red; */
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  min-height: 30px;
  /* background-color: #6b778c; */
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.title{
  margin-bottom: 20px;
  font-size: 30px;
}
.title03{
  font-size: 14px;
}
.cate-col{
  margin-bottom: 20px;
  
}

.el-tabs__content{
  height: 70vh !important;
  overflow-y: scroll;
}
.img-item{
  width: 90%;
}
</style>
